<template>
  <div>
    <el-row :gutter='10'>
      <el-col :span="6">
        <el-card>
          <Detail title='总销售额' count='$ 12346'>
            <template slot='charts'>
              <span>周同比 ; 56.67%</span>
              <span>日同比 ; 19.96%</span>
            </template>
            <template slot='footer'>
              <span>日销售额  $ 3244</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title='访问量' count='3446'>
            <template slot='charts'>
              <lineCharts></lineCharts>
            </template>
            <template slot='footer'>
              <span>日访问量  1244</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title='支付笔数' count='346'>
            <template slot='charts'>
              <barCharts></barCharts>
            </template>
            <template slot='footer'>
              <span>转化率  $ 3244</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title='运营活动效果' count='88%'>
            <template slot='charts'>
              <progressCharts></progressCharts>
            </template>
            <template slot='footer'>
              <span>周同比 ; 56.67%</span>
              <span>日同比 ; 19.96%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import lineCharts from './lineChart'
import barCharts from './barChart'
import progressCharts from './progressCharts'
export default {
  name: 'Card',
  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts
  }
}
</script>

<style lang="less" scoped>

</style>
